<template>
   <div class="common-layout">
       <el-container>
         <el-header>
			 
			 <el-row>
				<el-col :span="18">
					<h1>饿了么后台管理系统</h1>
				</el-col>
				<el-col :span="6">
					<el-button link type="primary">退出登录</el-button>
				</el-col>
			 </el-row>
		 </el-header>
         <el-container>
           <el-aside>
			   
			    <el-menu 
					:default-active="activeRoute" 
					class="el-menu-vertical-demo"
					router="true"
					@select="menuSelect">
			    	<el-menu-item index="/main/business">
			    		<el-icon><icon-menu /></el-icon>
			    		<span>商家管理</span>
			    	</el-menu-item>
			    	<el-menu-item index="/main/food">
			    		<el-icon><Dish /></el-icon>
			    		<span>餐品管理</span>
			    	</el-menu-item>
			    	<el-menu-item index="/main/user">
			    		<el-icon><User /></el-icon>
			    		<span>用户管理</span>
			    	</el-menu-item>
			    	<el-menu-item index="/main/address">
			    		<el-icon><Location /></el-icon>
			    		<span>地址管理</span>
			    	</el-menu-item>
					<el-menu-item index="/main/cart">
						<el-icon><ShoppingCart /></el-icon>
						<span>购物车管理</span>
					</el-menu-item>
					<el-menu-item index="/main/order">
						<el-icon><List /></el-icon>
						<span>订单管理</span>
					</el-menu-item>
			    </el-menu>
			   
		   </el-aside>
           <el-main>
			   <!-- 二级路由 -->
			   <router-view/>
		   </el-main>
         </el-container>
       </el-container>
     </div>
</template>

<script setup>
	import {onMounted, ref, getCurrentInstance, computed} from 'vue';
	import store from '@/store';
	import {
	  Menu as IconMenu,
	  Location,
	  User,
	  Dish,
	  ShoppingCart,
	  List
	} from '@element-plus/icons-vue'
	
	let {proxy} = getCurrentInstance();
	
	//计算属性
	let activeRoute = computed(()=>{
		return store.state.elMenuActive;
	});
	
	//监听菜单栏项的选中
	const menuSelect = (selectPath)=>{
		console.log('menuSelect---',selectPath);
		//将选中项的路径赋值给store中的变量
		store.state.elMenuActive = selectPath;
	}
	
</script>

<style scoped>
	
	.common-layout{
		width: 100%;
		height: 800px;
	}
	
	.el-header{
		height: 80px;
		line-height: 80px;
		background-color: azure;
	}
	
	.el-aside{
		width: 20%;
		height: 720px;
	}
	
	.el-main{
	}
	
</style>
